<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        /* 1、后代选择器 */
        .box span{
            color: red;
        }
        /* 2、子元素(子代)选择器 */
        .box > span {
            color: orange;
        }
        /* 3、交集选择器 */
        .box2 {
            color: red;
            font-size: 50px;
        }
        /* 交集来了 */
        div.box2 {
            background: pink;
        }
        h2.box2 {
            background: yellowgreen;
        }
        /* 并集选择器 */
        .box3, h2, #lai {
            color: red;
            font-size: 50px;
        }
        /* 相邻选择器(并列关系) */
        div + p {
            color: red;
            font-size: 50px;
        }
        .lj1 {
            color: red;
            text-decoration: none;
        }
        /* 鼠标经过 */
        .lj1:hover {
            color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 后代和子元素 -->
    <!-- <div class="box">
        <p class="pp">
            <span>span文字</span>
        </p>
        <span>span向天歌</span>
    </div>
    <span>span白猫</span> -->

    <!-- 交集选择器 -->
    <!-- <div class="box2">小老鼠</div>
    <div>上灯台</div>
    <h2 class="box2">偷油吃</h2>
    <p>下不来</p> -->

    <!-- 并集选择器 -->
    <!-- <div class="box3">猴子称大王</div> 
    <h2>无法无天</h2>
    <p id="lai">如来神掌</p> -->

    <!-- 相邻选择器(并列关系) -->
    <!-- <div>12345</div>
    <p>老虎</p>
    <p>老虎没打着</p>
    <h3>松鼠</h3>
    <span>哟~哟~</span> -->

    <!-- 链接伪类选择器 -->
     <a href="#" class="lj1">链接文字</a>

</body>
</html>